import React from 'react';
import { Text, StyleSheet } from 'react-native';

import PropTypes from 'prop-types';
import { px2dp } from 'bee/utils/px2dp';
import { colors } from 'bee/themes';

const Label = ({ title, textStyle }) => (
  <Text style={[styles.label, textStyle]}>{title}</Text>
);

const RedLabel = ({ title }) => <Label textStyle={styles.red} title={title} />;

const HotLabel = ({ title }) => <Label textStyle={styles.hot} title={title} />;

const NormalLabel = ({ title }) => (
  <Label textStyle={styles.normal} title={title} />
);

Label.propTypes = {
  title: PropTypes.string.isRequired,
  textStyle: Text.propTypes.style,
};

Label.defaultProps = {
  textStyle: {},
};

RedLabel.propTypes = {
  title: PropTypes.string.isRequired,
};

HotLabel.propTypes = {
  title: PropTypes.string.isRequired,
};

NormalLabel.propTypes = {
  title: PropTypes.string.isRequired,
};

const styles = StyleSheet.create({
  red: {
    color: colors[1003],
    borderColor: colors[1003],
    borderWidth: StyleSheet.hairlineWidth,
  },
  normal: {
    color: colors[1001],
    borderColor: colors[1001],
    borderWidth: StyleSheet.hairlineWidth,
  },
  hot: {
    backgroundColor: colors[1002],
    color: colors.white,
  },
  label: {
    height: px2dp(34),
    paddingLeft: px2dp(9),
    paddingRight: px2dp(9),
    textAlign: 'center',
    borderRadius: px2dp(17),
    lineHeight: px2dp(34),
  },
});

export { Label, HotLabel, RedLabel, NormalLabel };
